<template>
    <div>
          <span id="pid" style="display: none">
            <!--{{tableData=this.$route.query.data1}}-->
            {{page.id=this.$route.query.pid1}}
          </span>
      {{page.id=this.$route.query.pid1}}
      <!--模糊查询-->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">

        <el-form-item label="课程名称">
          <el-input v-model="formInline.title" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button type="primary" @click="res()">重置</el-button>
          <el-button type="primary" @click="add()">添加</el-button>
        </el-form-item>
      </el-form>
      <!--点击添加显示所有的课程-->
      <el-dialog title="新增课程" :visible.sync="dialogTableVisible" >
        <!--模糊查询-->
        <el-form :inline="true" :model="formInline1" class="demo-form-inline" ref="formInline1">
          <el-form-item label="课程名称">
            <el-input v-model="formInline1.title" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search1()">查询</el-button>
            <el-button type="primary" @click="res1()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="gridData">
          <el-table-column prop="pid" label="序号" width="100%">
            <template slot-scope="scope">
              <span>{{(pages.page - 1) * pages.size + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <!--<el-table-column prop="cid" label="课程ID" width="100%"></el-table-column>-->
          <el-table-column prop="title" label="课程名称"></el-table-column>
          <el-table-column  label="所属分类">
            <template slot-scope="scope">
              <span>{{scope.row.eduSubject.fname}}</span>
              /
              <span>{{scope.row.eduSubject.title}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
               <span v-if="scope.row.zhuanquid == page.id">已选择</span>

              <el-button type="success" v-if="scope.row.zhuanquid == null || scope.row.zhuanquid != page.id" size="mini" @click="handle(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="page1.current"
          :page-size="page1.size"
          :total="page1.total">
        </el-pagination>
      </el-dialog>
      <!--表格-->
      <el-table :data="this.$route.query.data1" ref="table" stripe border style="width: 100%">
        <el-table-column prop="pid" label="序号" width="100%">
          <template slot-scope="scope">
            <span>{{(pages.page - 1) * pages.size + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cid" label="课程ID" width="100%"></el-table-column>
        <el-table-column prop="title" label="课程名称"></el-table-column>
        <el-table-column  label="所属分类">
          <template slot-scope="scope">
            <span>{{scope.row.eduSubject.fname}}</span>
            /
            <span>{{scope.row.eduSubject.title}}</span>
          </template>

        </el-table-column>
        <!--<el-table-column prop="name" label="排序" width="250%"></el-table-column>-->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="0"
              :inactive-value="1"
              active-text="禁用"
              inactive-text="正常"
              active-color="#ff4949"
              inactive-color="#13ce66"
              @change="handleClose(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="cCreate" label="添加时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">

            <el-button size="mini" @click="handleEdit(scope.row)">排序</el-button>

            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
              :show-close=false
              :before-close="handleClose">
              <template>
                <el-input-number v-model="sort.csort" @change="handleChange" :min="1" :max="200" label="描述文字"></el-input-number>
              </template>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click=" updateBySort()">确 定</el-button>
              </span>
            </el-dialog>
            <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
              <el-button size="mini" slot="reference" type="danger">删除</el-button>
            </el-popconfirm><!--@click="$router.push('/')"-->
          </template>
        </el-table-column>
      </el-table >
      <!--分页-->
      <el-pagination
        background
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.$route.query.curr"
        :page-size="this.$route.query.size"
        :total="this.$route.query.total">
      </el-pagination>
    </div>
</template>

<script>
  import qs from 'qs'
    export default {
        name: "zonecouse",
        data(){
          return{
            tableData:'',
            dialogVisible: false,
            dialogTableVisible:false,
            //排序的相关数据
            sort:{
              csort:'',
              cid:'',
            },
            //pages用来自动生成序号的
            pages: {
              page: 1,
              size: 10,
              total: 100,
            },
            //这个page是用来分页的
            page:{
              current:1,
              size:10,
              total:0,
              title:'',
              id:'',
            },
            //所有课程的分页
            page1:{
              current:1,
              size:10,
              total:0,
              title:'',
              zhuanquid:this.$route.query.pid1,
            },
            formInline: {
              title: '',
            },
            formInline1: {
              title: '',
            },
            //点击添加显示表格的数据
            gridData: '',
            data1:'',
          }
        },mounted(){
      },
      methods:{
        search(){
          // this.page.goodsName = this.formInline.user;
          // this.page.goodsType = this.formInline.region;
          this.$refs['formInline'].validate((valid) => {
            if (valid) {
              console.log(this.formInline);
              this.page.title = this.formInline.title;
              console.log(this.page)
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          this.show(this.page);
        },
        search1(){
          // this.page.goodsName = this.formInline.user;
          // this.page.goodsType = this.formInline.region;
          this.$refs['formInline1'].validate((valid) => {
            if (valid) {
              console.log(this.formInline1);
              this.page1.title = this.formInline1.title;
              console.log(this.page1)
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          this.add();
        },
        res(){
          this.$nextTick(()=>{
            this.formInline.title ='';
            this.page.title ='';
            this.show(this.page);
          });
        },
        res1(){
          this.$nextTick(()=>{
            this.formInline1.title ='';
            this.page1.title ='';
            this.add();
          });
        },
        //更改课程的状态，要同时更改课程表和专区课程表
        async handleClose(done) {
            let zone = new Object();
            zone.cid = done.cid;
            zone.status = done.status;
          await   this.$axios.post("/zonecourse/eduCourse/update",qs.stringify(zone)).then(res=>{
            }),function () {
              alert("失败!")
            };
          await  this.$axios.post("/zonecourse/zoneCourse/update",qs.stringify(zone)).then(res=>{
            }),function () {
              alert("失败!")
            };
            this.show(this.page);
          },
        //将该课程从该分区内删除
        handleDelete(done){
          let zone = new Object();
          zone.cid = done.cid;
          this.$axios.post("/zonecourse/zoneCourse/delCourseByFq",qs.stringify(zone)).then(res=>{
            this.show(this.page);
          }),function () {
            alert("失败!")
          }
        },
        //点击显示排序
        handleEdit(done){
          this. dialogVisible =true;
          this.sort.cid = done.cid;
          this.sort.csort =done.csort;
        },
        //更改排序的数字
        handleChange(value) {
          this.sort.csort = value;
        },
        //更改排序
        updateBySort(){
          this.dialogVisible =false;
          this.$axios.post("/zonecourse/zoneCourse/update",qs.stringify(this.sort)).then(res=>{
          }),function () {
            alert("失败!")
          };
          this.show(this.page);
        },
        //分页的相关方法
        async  handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.page.size = val;
          this.page.current = 1;
          await  this.show(this.page);
        },
        async handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.page.current = val;
          await  this.show(this.page);
        },
        async  handleSizeChange1(val) {
          console.log(`每页 ${val} 条`);
          this.page1.size = val;
          this.page1.current = 1;
        },
        async handleCurrentChange1(val) {
          console.log(`当前页: ${val}`);
          this.page1.current = val;
          this.add();
        },
        //点击添加显示所有的课程
        async add(){
           await this.$axios.post("/zonecourse/eduCourse/selectAll",qs.stringify(this.page1)).then(res=>{
            console.log("所有的课程");
             //alert(JSON.stringify(res.data.records));
            this.gridData = res.data.records;
            this.page1.total = res.data.total;
            this.dialogTableVisible = true;
          }),function () {
            alert("失败!")
          };
          console.log(this.gridData);

        },
        //点击选择，新增该分区的课程
        handle(done){
          console.log(done);
          let data = new Object();
          data.courseId = done.cid;
          data.title = done.title;
          data.zhuanquid = this.page.id ;
          data.subjectId = done.subjectId;
          data.cover=done.cover;
          data.isFree=done.isFree;
          data.courseOriginal=done.courseOriginal;
          data.courseSvip=done.courseSvip;
          data.countBuy=done.countBuy;
          data.countStudy=done.countStudy;
          data.courseDiscount=done.courseDiscount;
          data.csort=done.csort;
          data.lecturerId=done.lecturerId;
          data.inid = done.inid;
          this.$axios.post("/zonecourse/zoneCourse/addfenqu",qs.stringify(data)).then(res=>{
            //alert(res.data);
            done.zhuanquid = this.page.id;
            this.show(this.page);
          }),function () {
            alert("失败!")
          };
        },
        //显示数据，调用父路由的方法（backstageManage.vue里的方法）
        async show(page) {
          //console.log(row);
          //this.$router.push({ path: '/b', query: { id: row.id }}) //带参跳转
          // this.$router.push({path:'/'})
          await  this.$bus.$emit("page",page);
        },
      },
    }
</script>

<style scoped>

</style>
